<template>
<div class="blog_details">
  <h1>{{blog?.title}}</h1>
  <MarkdownPreview :value="blog?.markdown" />
  <Reply :id="id" />
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import axios from "axios";
import {ElNotification} from "element-plus";
import MarkdownPreview from "../../components/markdown/MarkdownPreview.vue";
import Reply from "../../components/blog/reply/Reply.vue";


const blog = ref()
const route = useRoute()
const id = route.params.id

const getBlog = async () => {
  let id = route.params.id;
  let result = (await axios.get(`/api/blog/${id}`))?.data
  if (result?.code === 0) {
    blog.value = result?.object
    return
  }
  ElNotification.error({
    message: '无法加载文章'
  })
}

onMounted(async () => {
  await getBlog()
})
</script>

<style scoped>
h1 {
  margin: 20px 40px 0;
}
</style>